<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div class="user-group-selector">
        <el-select v-model="groupId" :size="size" placeholder="请选择" v-loading="loading" :style="customStyle">
            <el-option v-for="item in options" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <i style="margin-left: 8px" v-show="!loading" v-if="showRefresh" class="el-icon-refresh-right"
            @click="loadData"></i>
    </div>
</template>

<script>
import { getUserGroupList } from "@/api/user";

export default {
    data () {
        return {
            items: [],
            loading: false,
        };
    },
    props: {
        showRefresh: { type: Boolean, default: true },
        size: { type: String, default: "small" },
        customStyle: { type: String, default: "width:200px;" },
        value: { type: Number, default: null },
        cat: { type: String, default: "all" },
        firstOption: { type: Object, default: null },
    },

    mounted: function () {
        this.loadData();
    },

    computed: {
        groupId: {
            get () {
                return this.value;
            },
            set (val) {
                this.$emit("input", val);
            },
        },
        options: function () {
            var items = this.items;
            if (!this.firstOption) {
                return items;
            }
            return [this.firstOption].concat(items);
        },
    },

    methods: {
        loadData: function () {
            this.loading = true;
            var query = { cat: this.cat };
            getUserGroupList(query).then((resp) => {
                this.loading = false;
                this.items = resp.data;
            });
        },
    },
};
</script>

<style scoped></style>